<template>
  <div class="center">
    <div class="search clearfix">
      <Search @childFn="parentFn" />
      <el-select
        v-model="modeltype"
        :clearable="true"
        :filterable="true"
        placeholder="请选择站点类型"
        :style="{ width: '200px' }"
      >
        <el-option
          v-for="item in modellist"
          :label="item.name"
          :key="item.index"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="runstatus"
        :clearable="true"
        :filterable="true"
        placeholder="请选择站点运营状态"
        :style="{ width: '200px' }"
      >
        <el-option
          v-for="item in runstatuslist"
          :label="item.label"
          :key="item.index"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="isOnline"
        :clearable="true"
        :filterable="true"
        placeholder="请选择站点在线状态"
        :style="{ width: '200px' }"
      >
        <el-option
          v-for="item in linestatus"
          :label="item.label"
          :key="item.index"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="sitename"
        :clearable="true"
        :filterable="true"
        placeholder="请输入站点名称"
        :style="{ width: '200px' }"
      ></el-input>
      <el-button type="primary" @click="getside">查询</el-button>
      <el-button type="primary" @click="add">新增</el-button>
    </div>
      <div class="barchart">
        <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="告警等级分类统计">
        <div class="barcake"></div>
        </dv-border-box-11>
      </div>
      <div class="table">
        <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点信息">
        <el-table
          :data="tableData"
          class="customer-table"
          height="430"
          :header-cell-style="headClass"
        >
          <el-table-column type="index" width="40"> </el-table-column>
          <el-table-column prop="siteNo" label="站点编号" align="center">
          </el-table-column>
          <el-table-column
            prop="siteName"
            label="站点名称"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column prop="typeName" label="站点类型" align="center">
          </el-table-column>
          <el-table-column prop="runStatus" label="站点运营状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.runStatus == 'run'">运营</span>
              <span v-if="scope.row.runStatus == 'stop'">停运</span>
              <span v-if="scope.row.runStatus == 'service'">检修</span>
              <span v-else-if="scope.row.runStatus == 'fault'">故障</span>
            </template>
          </el-table-column>
          <el-table-column prop="isOnline" label="站点在线状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.isOnline == 'true'">在线</span>
              <span
                style="color: rgba(254, 102, 25, 1)"
                v-else-if="scope.row.isOnline == 'false'"
                >离线</span
              >
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime.substring(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column prop="tel" label="站点联系人方式" align="center">
          </el-table-column>
          <el-table-column label="站点信息" align="center">
            <template slot-scope="scope">
              <span
                @click="handle(scope.row)"
                style="cursor: pointer; color: rgba(0, 255, 255, 1)"
                >站点详情</span
              >
            </template>
          </el-table-column>
          <el-table-column label="阈值信息" align="center">
            <template slot-scope="scope">
              <span
                @click="Threshold(scope.row)"
                style="cursor: pointer; color: rgba(0, 255, 255, 1)"
                >阈值详情</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                v-if="!scope.row.pro && !scope.row.sn"
                size="mini"
                type="primary"
                @click="enter(scope.row)"
                >录入</el-button
              >
              <el-button
                v-if="usertype == 'leader'"
                size="mini"
                type="primary"
                @click="accredit(scope.row)"
                >授权</el-button
              >
              <el-button size="mini" type="primary" @click="change(scope.row)"
                >编辑</el-button
              >
              <el-button
                <el-button
                size="mini"
                type="primary"
                @click="create(scope.row)"
                >创建工单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          @prev-click="prevclick"
          @next-click="nextclick"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total,prev, pager, next"
          :total="total"
        >
        </el-pagination>
        <div class="asile-echart" v-show="loading">
          <dv-loading></dv-loading>
        </div>
        </dv-border-box-11>
      </div>
    </Border>

    <!-- 新增站点 -->
    <el-dialog
      class="station-add"
      title="新增站点"
      :inline="true"
      :visible.sync="dialogFormVisible1"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="addform"
        label-position="left"
        label-width="100px"
        ref="addruleform"
        :rules="addrules"
      >
        <el-form-item label="租户账号" prop="accounts">
          <el-select v-model="addform.accounts">
            <el-option
              v-for="item in accountlist"
              :label="item.companyName"
              :key="item.index"
              :value="item.accounts"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点编号" prop="siteNum">
          <el-input v-model="addform.siteNum"></el-input>
        </el-form-item>
        <el-form-item label="站点名称" prop="siteName">
          <el-input v-model="addform.siteName"></el-input>
        </el-form-item>
        <el-form-item label="站点类型" prop="modeltype">
          <el-select v-model="addform.modeltype" placeholder="请选择站点类型">
            <el-option
              v-for="item in modellist"
              :label="item.name"
              :key="item.index"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营状态" prop="runstatus">
          <el-select v-model="addform.runstatus">
            <el-option
              v-for="item in runstatuslist"
              :label="item.label"
              :key="item.index"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省" prop="provincecode">
          <el-select
            v-model="addform.province"
            placeholder="省"
            @change="handleChange($event)"
          >
            <el-option
              v-for="(item, index) in province"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="citycode">
          <el-select
            v-model="addform.city"
            placeholder="市"
            @change="handleChange1($event)"
          >
            <el-option
              v-for="(item, index) in city"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区" prop="areacode">
          <el-select
            v-model="addform.area"
            placeholder="区"
            @change="handleChange2($event)"
          >
            <el-option
              v-for="(item, index) in area"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人姓名" prop="leaderName">
          <el-input v-model="addform.leaderName"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" prop="leaderTel">
          <el-input v-model="addform.leaderTel"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="addform.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="addform.tel"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="lng">
          <el-input v-model="addform.lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input v-model="addform.lat"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="addform.remark"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="addform.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addsite(addform)">新增</el-button>
          <el-button @click="addout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 站点编辑 -->
    <el-dialog
      class="station-update"
      title="站点编辑"
      :inline="true"
      :visible.sync="dialogFormVisible2"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="updateform"
        label-position="left"
        label-width="100px"
        ref="updateruleform"
        :rules="updaterules"
      >
        <el-form-item label="租户账号" prop="accounts">
          <el-select v-model="updateform.accounts">
            <el-option
              v-for="item in accountlist"
              :label="item.companyName"
              :key="item.index"
              :value="item.accounts"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点名称" prop="siteName">
          <el-input v-model="updateform.siteName"></el-input>
        </el-form-item>
        <el-form-item label="站点编号" prop="siteNo">
          <el-input v-model="updateform.siteNo" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="站点类型" prop="aisleType">
          <el-select
            v-model="updateform.aisleType"
            placeholder="请选择站点类型"
          >
            <el-option
              v-for="item in modellist"
              :label="item.name"
              :key="item.index"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营状态" prop="runStatus">
          <el-select v-model="updateform.runStatus">
            <el-option
              v-for="item in runstatuslist"
              :label="item.label"
              :key="item.index"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省" prop="provinceCode">
          <el-select
            v-model="updateform.province"
            placeholder="省"
            @change="provincehandleChange($event)"
          >
            <el-option
              v-for="item in province"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="cityCode">
          <el-select
            v-model="updateform.city"
            placeholder="市"
            @change="cityhandleChange($event)"
          >
            <el-option
              v-for="item in city"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区" prop="areaCode">
          <el-select
            v-model="updateform.district"
            placeholder="区"
            @change="areahandleChange($event)"
          >
            <el-option
              v-for="item in area"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人姓名" prop="leaderName">
          <el-input v-model="updateform.leaderName"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" prop="leaderTel">
          <el-input v-model="updateform.leaderTel"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="updateform.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="updateform.tel"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="lng">
          <el-input v-model="updateform.lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input v-model="updateform.lat"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="updateform.remark"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="updateform.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatesite(updateform)"
            >修改</el-button
          >
          <el-button @click="updateout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 站点授权 -->
    <el-dialog
      class="order-add"
      title="站点授权"
      :inline="true"
      :visible.sync="dialogFormVisible7"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="accreditform"
        label-position="left"
        label-width="100px"
        ref="accreditruleform"
        :rules="accreditrules"
      >
        <el-form-item label="站点名称" prop="siteName">
          <el-input v-model="accreditform.siteName"></el-input>
        </el-form-item>
        <el-form-item label="用户选择" prop="staff">
          <el-select v-model="accreditform.staff" multiple collapse-tags>
            <el-option
              v-for="item in stafflist"
              :label="item.userName"
              :key="item.value"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="accreditenter(accreditform)"
            >确认</el-button
          >
          <el-button @click="accreditout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 创建工单 -->
    <el-dialog
      class="order-add"
      title="创建工单"
      :inline="true"
      :visible.sync="dialogFormVisible3"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="addorderform"
        label-position="left"
        label-width="100px"
        ref="addorderruleform"
        :rules="addorderrules"
      >
        <el-form-item label="站点名称" prop="sitename">
          <el-input v-model="addorderform.sitename"></el-input>
        </el-form-item>
        <el-form-item label="站点编号" prop="sitenum">
          <el-input v-model="addorderform.sitenum"></el-input>
        </el-form-item>
        <el-form-item label="工单编号" prop="ordernum">
          <el-input v-model="addorderform.ordernum"></el-input>
        </el-form-item>
        <el-form-item label="工单标题" prop="title">
          <el-input v-model="addorderform.title"></el-input>
        </el-form-item>
        <el-form-item label="问题分类" prop="ordertype">
          <el-select v-model="addorderform.ordertype">
            <el-option
              v-for="item in ordertypelist"
              :key="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="mail">
          <el-input v-model="addorderform.mail"></el-input>
        </el-form-item>
        <el-form-item label="问题描述" prop="question">
          <el-input v-model="addorderform.question"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="addorderform.tel"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="weixin">
          <el-input v-model="addorderform.weixin"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addorderform.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addorder(addorderform)"
            >新增</el-button
          >
          <el-button @click="addorderout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 站点详情 -->
    <el-dialog
      class="site-info"
      title="站点详情"
      :inline="true"
      :visible.sync="dialogFormVisible4"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="detail"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="所属租户">
          <el-input :value="detail.accounts" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="站点名称">
          <el-input :value="detail.siteName" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="站点编号">
          <el-input :value="detail.siteNo" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="站点类型">
          <el-input :value="detail.typeName" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="运营状态">
          <el-input
            v-if="detail.runStatus == 'run'"
            value="运营"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="detail.runStatus == 'stop'"
            value="停运"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="detail.runStatus == 'service'"
            value="检修"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="detail.runStatus == 'fault'"
            value="故障"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="在线状态">
          <el-input
            v-if="detail.isOnline == 'true'"
            value="在线"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="detail.isOnline == 'false'"
            value="离线"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="告警等级">
          <el-input
            v-if="detail.alarmStatus == 'zero' || detail.alarmStatus == null"
            value="无"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="detail.alarmStatus == 'one'"
            value="一级"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="detail.alarmStatus == 'two'"
            value="二级"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="detail.alarmStatus == 'three'"
            value="三级"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="省">
          <el-input :value="detail.province" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="市">
          <el-input :value="detail.city" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="区">
          <el-input :value="detail.district" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="负责人姓名">
          <el-input :value="detail.leaderName" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input :value="detail.leaderTel" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input :value="detail.contact" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话">
          <el-input :value="detail.tel" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input :value="detail.address" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :value="detail.remark" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible4 = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 阈值详情 -->
    <el-dialog
      class="threshold-info"
      title="阈值详情"
      :inline="true"
      :visible.sync="dialogFormVisible6"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="threshold"
        label-position="left"
        label-width="150px"
        ref="thresholdruleform"
        :rules="thresholdrules"
      >
        <el-form-item label="电池仓一级阈值" prop="warehouse.levelOne">
          <el-input v-model="threshold.warehouse.levelOne"></el-input>
        </el-form-item>
        <el-form-item label="电池仓二级阈值" prop="warehouse.levelTwo">
          <el-input v-model="threshold.warehouse.levelTwo"></el-input>
        </el-form-item>
        <el-form-item label="电池仓三级阈值" prop="warehouse.levelThree">
          <el-input v-model="threshold.warehouse.levelThree"></el-input>
        </el-form-item>
        <el-form-item label="充电柜一级阈值" prop="cabinet.levelOne">
          <el-input v-model="threshold.cabinet.levelOne"></el-input>
        </el-form-item>
        <el-form-item label="充电柜二级阈值" prop="cabinet.levelTwo">
          <el-input v-model="threshold.cabinet.levelTwo"></el-input>
        </el-form-item>
        <el-form-item label="充电柜三级阈值" prop="cabinet.levelThree">
          <el-input v-model="threshold.cabinet.levelThree"></el-input>
        </el-form-item>
        <el-form-item label="线槽一级阈值" prop="line.levelOne">
          <el-input v-model="threshold.line.levelOne"></el-input>
        </el-form-item>
        <el-form-item label="线槽二级阈值" prop="line.levelTwo">
          <el-input v-model="threshold.line.levelTwo"></el-input>
        </el-form-item>
        <el-form-item label="线槽三级阈值" prop="line.levelThree">
          <el-input v-model="threshold.line.levelThree"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="thresholdenter(threshold)">修改</el-button>
          <el-button @click="dialogFormVisible6 = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 录入 -->
    <el-dialog
      class="enter"
      title="录入"
      :inline="true"
      :visible.sync="dialogFormVisible5"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="enterform"
        label-position="left"
        label-width="100px"
        ref="enterruleform"
        :rules="enterrules"
      >
        <el-form-item label="站点版本号" prop="pro">
          <el-input v-model="enterform.pro"></el-input>
        </el-form-item>
        <el-form-item label="序列号" prop="sn">
          <el-input v-model="enterform.sn"></el-input>
        </el-form-item>
        <el-form-item label="软件版本" prop="softwareVersion">
          <el-input v-model="enterform.softwareVersion"></el-input>
        </el-form-item>
        <el-form-item label="硬件版本" prop="hardwareVersion">
          <el-input v-model="enterform.hardwareVersion"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="entersub(enterform)"
            >录入</el-button
          >
          <el-button @click="enterout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Search from "../../common/select";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  name: "standsidelist",
  components: {
    Search,
  },
  data() {
    //手机号校验
    let validMobile = (rule, value, callback) => {
      if (value == "" || value == undefined) {
        callback(new Error("手机号不能为空"));
      } else {
        let reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if (!reg.test(value)) {
          callback(new Error("手机号格式不对"));
        } else {
          callback();
        }
      }
    };
    //经度校验
    let lng = (rule, value, callback) => {
      if (value == "" || value == undefined) {
        callback(new Error("经度不能为空"));
      } else {
        // let reg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d)|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0|180)$/;
        // if (!reg.test(value)) {
        //   callback(
        //     new Error(
        //       "经度整数部分为0-180,小数部分为0到6位且不能出现空格和特殊符号!"
        //     )
        //   );
        // } else {
        //   callback();
        // }
      }
    };
    //纬度校验
    let lat = (rule, value, callback) => {
      if (value == "" || value == undefined) {
        callback(new Error("纬度不能为空"));
      } else {
        // let reg = /^(\-|\+)?([0-8]?\d{1}\.\d|90\.0|[0-8]?\d{1}|90)$/;
        // if (!reg.test(value)) {
        //   callback(
        //     new Error(
        //       "纬度整数部分为0-90,小数部分为0到6位且不能出现空格和特殊符号!"
        //     )
        //   );
        // } else {
        //   callback();
        // }
      }
    };
    return {
      usertype: "",
      province: [],
      city: [],
      area: [],
      currentPage: 1,
      pagesize: 10,
      message: {},
      alarmstatus: "",
      isOnline: "",
      sitename: "",
      runstatus: "",
      sitetype: "",
      modeltype: "",
      activeName: "",
      $chart1: "",
      total: 0,
      tableData: [],
      loading: false,
      dialogFormVisible1: false, //新增站点弹窗
      dialogFormVisible2: false, //站点编辑弹窗
      dialogFormVisible3: false, //工单创建弹窗
      dialogFormVisible4: false, //站点详情弹窗
      dialogFormVisible5: false, //录入弹窗
      dialogFormVisible6: false, //阈值弹窗
      dialogFormVisible7: false, //授权弹窗
      detail: {},
      threshold: {
        warehouse: {
          levelOne: "",
          levelTwo: "",
          levelThree: "",
        },
        cabinet: {
          levelOne: "",
          levelTwo: "",
          levelThree: "",
        },
        line: {
          levelOne: "",
          levelTwo: "",
          levelThree: "",
        },
      },
      thresholdruleform: {
        warehouse: {
          levelOne: "",
          levelTwo: "",
          levelThree: "",
        },
        cabinet: {
          levelOne: "",
          levelTwo: "",
          levelThree: "",
        },
        line: {
          levelOne: "",
          levelTwo: "",
          levelThree: "",
        },
      },
      thresholdrules: {
        warehouse: {
          levelOne: [
            {
              required: true,
              message: "电池仓一级阈值不能为空",
              trigger: "blur",
            },
          ],
          levelTwo: [
            {
              required: true,
              message: "电池仓二级阈值不能为空",
              trigger: "blur",
            },
          ],
          levelThree: [
            {
              required: true,
              message: "电池仓三级阈值不能为空",
              trigger: "blur",
            },
          ],
        },
        cabinet: {
          levelOne: [
            {
              required: true,
              message: "充电柜一级阈值不能为空",
              trigger: "blur",
            },
          ],
          levelTwo: [
            {
              required: true,
              message: "充电柜二级阈值不能为空",
              trigger: "blur",
            },
          ],
          levelThree: [
            {
              required: true,
              message: "充电柜三级阈值不能为空",
              trigger: "blur",
            },
          ],
        },
        line: {
          levelOne: [
            {
              required: true,
              message: "线槽一级阈值不能为空",
              trigger: "blur",
            },
          ],
          levelTwo: [
            {
              required: true,
              message: "线槽二级阈值不能为空",
              trigger: "blur",
            },
          ],
          levelThree: [
            {
              required: true,
              message: "线槽三级阈值不能为空",
              trigger: "blur",
            },
          ],
        },
      },
      enterform: {
        pro: "",
        sn: "",
        siteNo: "",
        hardwareVersion: "",
        softwareVersion: "",
      },
      enterrules: {
        pro: [
          { required: true, message: "站点版本号不能为空", trigger: "blur" },
        ],
        sn: [{ required: true, message: "序列号不能为空", trigger: "blur" }],
        hardwareVersion: [
          { required: true, message: "硬件版本不能为空", trigger: "blur" },
        ],
        softwareVersion: [
          { required: true, message: "软件版本不能为空", trigger: "blur" },
        ],
      },
      enterruleform: {
        pro: "",
        sn: "",
        hardwareVersion: "",
        softwareVersion: "",
      },
      addform: {
        accounts: "",
        siteName: "",
        vehicleType: "",
        modeltype: "",
        runstatus: "",
        province: "",
        city: "",
        area: "",
        provincecode: "",
        citycode: "",
        areacode: "",
        leaderName: "",
        leaderTel: "",
        contact: "",
        tel: "",
        lng: "",
        lat: "",
        remake: "",
        address: "",
      },
      addrules: {
        accounts: [
          { required: true, message: "账号不能为空", trigger: "blur" },
        ],
        siteName: [
          { required: true, message: "站点名称不能为空", trigger: "blur" },
        ],
        siteNum: [
          { required: true, message: "站点编号不能为空", trigger: "blur" },
        ],
        modeltype: [
          { required: true, message: "通道类型不能为空", trigger: "blur" },
        ],
        runstatus: [
          { required: true, message: "站点运营状态不能为空", trigger: "blur" },
        ],
        provincecode: [
          { required: true, message: "省份不能为空", trigger: "blur" },
        ],
        citycode: [{ required: true, message: "市不能为空", trigger: "blur" }],
        // areacode:[{required: true,message:'区不能为空',trigger:'blur'}],
        leaderName: [
          { required: true, message: "负责人不能为空", trigger: "blur" },
        ],
        leaderTel: [
          { required: true, validator: validMobile, trigger: "blur" },
        ],
        contact: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        tel: [{ required: true, validator: validMobile, trigger: "blur" }],
        lng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
        lat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
        address: [
          { required: true, message: "详细地址不能为空", trigger: "blur" },
        ],
      },
      fileList: [],
      addruleform: {
        accounts: "",
        siteName: "",
        modeltype: "",
        runstatus: "",
        provincecode: "",
        citycode: "",
        areacode: "",
        leaderName: "",
        leaderTel: "",
        contact: "",
        tel: "",
        lng: "",
        lat: "",
        address: "",
      },
      addorderform: {
        sitename: "",
        sitenum: "",
        ordernum: "",
        title: "",
        ordertype: "",
        imagePath1: "",
        imagePath2: "",
        imagePath3: "",
        mail: "",
        question: "",
        tel: "",
        weixin: "",
        remake: "",
      },
      addorderrules: {
        sitename: [
          { required: true, message: "站点名称不能为空", trigger: "blur" },
        ],
        sitenum: [
          { required: true, message: "站点编号不能为空", trigger: "blur" },
        ],
        ordernum: [
          { required: true, message: "工单编号不能为空", trigger: "blur" },
        ],
        title: [
          { required: true, message: "工单标题不能为空", trigger: "blur" },
        ],
        ordertype: [
          { required: true, message: "工单类型不能为空", trigger: "blur" },
        ],
        mail: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
        tel: [{ required: true, validator: validMobile, trigger: "blur" }],
      },
      addorderruleform: {
        sitename: "",
        sitenum: "",
        ordernum: "",
        title: "",
        ordertype: "",
        mail: "",
        question: "",
        tel: "",
        weixin: "",
        remake: "",
      },
      updaterules: {
        accounts: [
          { required: true, message: "租户账号不能为空", trigger: "blur" },
        ],
        siteName: [
          { required: true, message: "站点名称不能为空", trigger: "blur" },
        ],
        siteNo: [
          { required: true, message: "站点编号不能为空", trigger: "blur" },
        ],
        aisleType: [
          { required: true, message: "站点类型不能为空", trigger: "blur" },
        ],
        runStatus: [
          { required: true, message: "站点运营状态不能为空", trigger: "blur" },
        ],
        provinceCode: [
          { required: true, message: "省份不能为空", trigger: "blur" },
        ],
        cityCode: [{ required: true, message: "市不能为空", trigger: "blur" }],
        // areacode:[{required: true,message:'区不能为空',trigger:'blur'}],
        leaderName: [
          { required: true, message: "负责人不能为空", trigger: "blur" },
        ],
        leaderTel: [
          { required: true, validator: validMobile, trigger: "blur" },
        ],
        contact: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        tel: [{ required: true, validator: validMobile, trigger: "blur" }],
        lng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
        lat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
        address: [
          { required: true, message: "详细地址不能为空", trigger: "blur" },
        ],
      },
      updateruleform: {
        accounts: "",
        siteName: "",
        siteNo: "",
        aisleType: "",
        runStatus: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        leaderName: "",
        leaderTel: "",
        contact: "",
        tel: "",
        lng: "",
        lat: "",
        address: "",
      },
      updateform: {
        accounts: "",
        lng: "",
        lat: "",
        siteName: "",
        siteNo: "",
        aisleType: "",
        runStatus: "",
        province: "",
        city: "",
        district: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        leaderName: "",
        leaderTel: "",
        contact: "",
        tel: "",
        address: "",
      },
      accreditform: {
        siteName: "",
        siteNo: "",
        staff: [],
      },
      accreditruleform: {
        siteName: "",
        staff: "",
      },
      accreditrules: {
        siteName: [
          { required: true, message: "站点名称不能为空", trigger: "blur" },
        ],
        staff: [
          { required: true, message: "授权用户不能为空", trigger: "blur" },
        ],
      },
      stafflist: [],
      accountlist: [],
      typelist: [],
      modellist: [],
      ordertypelist: [
        {
          value: "温度告警",
        },
        {
          value: "网络告警",
        },
        {
          value: "box告警",
        },
        {
          value: "程序异常告警",
        },
      ],
      typelist: [],
      runstatuslist: [
        {
          label: "运营",
          value: "run",
        },
        {
          label: "停运",
          value: "stop",
        },
        {
          label: "检修",
          value: "service",
        },
        {
          label: "故障",
          value: "fault",
        },
      ],
      alarmstatuslist: [
        {
          label: "无",
          value: "zero",
        },
        {
          label: "一级",
          value: "one",
        },
        {
          label: "二级",
          value: "two",
        },
        {
          label: "三级",
          value: "three",
        },
      ],
      linestatus: [
        {
          label: "在线",
          value: "true",
        },
        {
          label: "离线",
          value: "false",
        },
      ],
      option: {
        backgroundColor: "transparent", //背景色
        tooltip: {
          formatter: function (params) {},
        },
        legend: {
          data: [],
        },
        grid: {
          x: 60,
          y: 50,
          x2: 60,
          y2: 60,
          containLabel: true,
        },
        xAxis: {
          data: [],
          triggerEvent: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#133579",
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          triggerEvent: true,
          splitLine: {
            show: false,
            lineStyle: {
              color: "#11366e",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              width: 0,
            },
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        },
        series: [
          {
            name: "hill",
            barMinHeight: 10,
            type: "pictorialBar",//柱子样式变化pictorialBar图
            barCategoryGap: "60%",
            symbol://显示形状控制
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#01EAED",
                  },
                  {
                    offset: 0.5,
                    color: "#02C4DD",
                  },
                  {
                    offset: 1,
                    color: "#029ED9",
                  },
                ]),
              },
            },
            //上面显示的数字样式
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#fff",
                  fontSize: 20,
                },
              },
            },
            data: [],
            z: 10,
          },
        ],
      },
    };
  },
  watch: {
    currentPage() {
      this.getside();
    },
  },
  methods: {
    //接收子组件传的省市区对象
    parentFn(payload) {
      this.message = payload;
    },
    headClass() {
      return "background-color: transparent;color:#fff;font-weight:bold;";
    },
    handle(row) {
      let params = {
        id: row.id,
      };
      this.$http
        .post("/site/device/details", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.detail = Object.assign({}, res.data.b);
            this.dialogFormVisible4 = true;
          }
        })
        .catch((err) => {});
    },
    //获取站点列表
    getside() {
      this.loading = true;
      this.getmodel();
      let params = {
        aisleType: this.modeltype || "",
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        runStatus: this.runstatus || "",
        siteName: this.sitename || "",
        isOnline: this.isOnline,
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
      };
      this.$http
        .post("/site/device/list2", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.total = res.data.b.total;
            this.tableData = res.data.b.records;
          }
          this.loading = false;
        })
        .catch((err) => {});
    },
    //获取租户下拉列表
    getaccountlist() {
      this.$http
        .get("/tenant/tenantList")
        .then((res) => {
          if (res.data.h.code == 0) {
            this.accountlist = res.data.b;
          }
        })
        .catch((err) => {});
    },
    getsitetype() {
      this.$http
        .get("/site/device", {})
        .then((res) => {
          if (res.data.h.code == 0) {
            let xdata = [];
            let ydata = [];
            res.data.b.map((item) => {
              for (let i in item) {
                xdata.push(i);
                ydata.push(item[i]);
              }
            });
            let statuslist = xdata.map((item) => {
              if (item == "run") {
                item = "运营";
                return item;
              }
              if (item == "stop") {
                item = "停运";
                return item;
              }
              if (item == "service") {
                item = "检修";
                return item;
              }
              if (item == "fault") {
                item = "故障";
                return item;
              }
            });
            
            this.$chart1.setOption({
              xAxis: {
                data: statuslist,
              },
              series: [
                {
                  data: ydata,
                },
              ],
            });
          }
        })
        .catch((err) => {});
    },
    accredit(row) {
      this.dialogFormVisible7 = true;
      this.accreditform.siteName = row.siteName;
      this.accreditform.siteNo = row.siteNo;
      this.$http
        .get("/user/tenants")
        .then((res) => {
          if (res.data.h.code == 0) {
            this.stafflist = res.data.b;
          }
        })
        .catch((err) => {});
    },
    accreditenter() {
      let params = {
        siteNo: this.accreditform.siteNo,
        userIds: this.accreditform.staff,
      };
      this.$http
        .post("/site/device/authorUser", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.stafflist = res.data.b;
            this.accreditout();
          }
        })
        .catch((err) => {});
    },
    accreditout() {
      this.dialogFormVisible7 = false;
    },
    //新增站点开始
    add() {
      this.dialogFormVisible1 = true;
      this.getprovince();
      this.getaccountlist();
    },
    addsite(form) {
      let params = {
        accounts: form.accounts,
        siteName: form.siteName,
        siteNo: form.siteNum,
        aisleType: form.modeltype,
        runStatus: form.runstatus,

        province: form.province,
        city: form.city,
        district: form.area,

        provinceCode: form.provincecode,
        cityCode: form.citycode,
        districtCode: form.areacode,
        leaderName: form.leaderName,
        leaderTel: form.leaderTel,
        contact: form.contact,
        tel: form.tel,
        position: form.lng + "," + form.lat,
        remark: form.remake,
        address: form.address,
      };
      this.$refs.addruleform.validate((valid) => {
        if (valid) {
          this.$http
            .post("/site/device/add", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.addout();
                this.getside();
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    addorder(form) {
      this.$refs.addorderruleform.validate((valid) => {
        if (valid) {
          this.$refs.upload1.submit();
          this.$refs.upload2.submit();
          this.$refs.upload3.submit();
          let params = {
            accounts: JSON.parse(sessionStorage.getItem("userinfo")).accounts,
            siteName: form.sitename,
            siteNo: form.sitenum,
            title: form.title,
            category: form.ordertype,
            mail: form.mail,
            question: form.question,
            weixin: form.weiixn,
            tel: form.tel,
            remark: form.remake,
          };
          this.$http
            .post("/site/workNo/create", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.addorderout();
                this.$message({
                  message: "创建成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    updatesite(form) {
      let params = {
        accounts: form.accounts,
        siteName: form.siteName,
        id: form.id,
        runStatus: form.runStatus,
        aisleType: form.aisleType,

        province: form.province,
        city: form.city,
        district: form.district,

        provinceCode: form.provincecode,
        cityCode: form.citycode,
        districtCode: form.districtcode,
        leaderName: form.leaderName,
        leaderTel: form.leaderTel,
        contact: form.contact,
        tel: form.tel,

        position: form.lng + "," + form.lat,

        remark: form.remake,
        address: form.address,
      };
      this.$refs.updateruleform.validate((valid) => {
        if (valid) {
          this.$http
            .post("/site/device/update", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.updateout();
                this.getside();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    //编辑站点开始
    change(row) {
      this.getaccountlist();
      let params = {
        id: row.id,
      };
      this.$http
        .post("/site/device/details", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.updateform = Object.assign(this.updateform, res.data.b);
            this.dialogFormVisible2 = true;
            this.getmodel();
            this.getprovince();
            this.updateform.lng = this.updateform.position.split(",")[0];
            this.updateform.lat = this.updateform.position.split(",")[1];
            let param = {
              superCode: this.updateform.provinceCode || "",
            };
            this.$http
              .post("/area/getChild", param)
              .then((res) => {
                if (res.data.h.code == 0) {
                  this.city = res.data.b;
                }
              })
              .catch((err) => {});
            let data = {
              superCode: this.updateform.cityCode || "",
            };
            this.$http
              .post("/area/getChild", data)
              .then((res) => {
                if (res.data.h.code == 0) {
                  this.area = res.data.b;
                }
              })
              .catch((err) => {});
          }
        })
        .catch((err) => {});
    },
    //创建工单结束
    create(row) {
      this.dialogFormVisible3 = true;
      this.addorderform.sitename = row.siteName;
      this.addorderform.sitenum = row.siteNo;
    },
    //新增站点表单清空
    addformclear() {
      for (let i in this.addform) {
        this.addform[i] = "";
      }
    },
    //编辑站点表单清空
    updateformclear() {
      for (let i in this.updateform) {
        this.updateform[i] = "";
      }
    },
    //新增工单表单清空
    addorderformclear() {
      for (let i in this.addorderform) {
        this.addorderform[i] = "";
      }
    },
    enterformclear() {
      for (let i in this.enterform) {
        this.enterform[i] = "";
      }
    },
    //新增站点结束
    addout() {
      this.$refs.addruleform.clearValidate();
      this.dialogFormVisible1 = false;
      this.addformclear();
    },
    //新增工单结束
    addorderout() {
      this.$refs.addorderruleform.clearValidate();
      this.dialogFormVisible3 = false;
      this.addorderformclear();
    },
    enter(row) {
      this.dialogFormVisible5 = true;
      this.enterform.siteNo = row.siteNo;
      this.$http.get("/site/device/siteDetails/" + row.siteNo).then((res) => {
        if (res.data.h && res.data.h.code == 0 && res.data.b) {
          let { pro, sn, softwareVersion, hardwareVersion } = res.data.b;
          this.enterform.pro = pro || "";
          this.enterform.sn = sn || "";
          this.enterform.softwareVersion = softwareVersion || "";
          this.enterform.hardwareVersion = hardwareVersion || "";
        }
      });
    },
    entersub(form) {
      let params = {
        pro: form.pro,
        sn: form.sn,
        siteNo: form.siteNo,
        softwareVersion: form.softwareVersion,
        hardwareVersion: form.hardwareVersion,
      };
      this.$refs.enterruleform.validate((valid) => {
        if (valid) {
          this.$http
            .post("/site/device/saveSiteDetail", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.enterout();
                this.getside();
                this.$message({
                  message: "录入成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    enterout() {
      this.$refs.enterruleform.clearValidate();
      this.dialogFormVisible5 = false;
      this.enterformclear();
    },
    //阈值信息
    Threshold(row) {
      this.$http
        .get("/redis/alarmSiteValue/" + row.siteNo)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.threshold = JSON.parse(JSON.stringify(res.data.b.b));
            this.threshold.siteNo = row.siteNo;
          }
        })
        .catch((err) => {});
      this.dialogFormVisible6 = true;
    },
    //修改阈值信息
    thresholdenter(form) {
      let params = {
        siteNo: form.siteNo,
        warehouse: {
          levelOne: form.warehouse.levelOne,
          levelTwo: form.warehouse.levelTwo,
          levelThree: form.warehouse.levelThree,
        },
        cabinet: {
          levelOne: form.cabinet.levelOne,
          levelTwo: form.cabinet.levelTwo,
          levelThree: form.cabinet.levelThree,
        },
        line: {
          levelOne: form.line.levelOne,
          levelTwo: form.line.levelTwo,
          levelThree: form.line.levelThree,
        },
      };
      this.$refs.thresholdruleform.validate((valid) => {
        if (valid) {
          this.$http
            .post("/site/alarm/siteAlarmTV", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.dialogFormVisible6 = false;
                this.$refs.thresholdruleform.clearValidate();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    //编辑站点结束
    updateout() {
      this.$refs.updateruleform.clearValidate();
      this.dialogFormVisible2 = false;
      this.updateformclear();
    },
    //上一页
    prevclick() {
      this.currentPage--;
    },
    //下一页
    nextclick() {
      this.currentPage++;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getprovince() {
      let params = {
        superCode: "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.province = res.data.b;
          }
        })
        .catch((err) => {});
    },
    handleChange($event) {
      this.city = [];
      this.area = [];
      this.addform.city = "";
      this.addform.province = $event.name;
      this.addform.provincecode = $event.code;
      this.addform.area = "";
      let params = {
        superCode: this.addform.provincecode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.city = res.data.b;
          }
        })
        .catch((err) => {});
    },
    provincehandleChange($event) {
      this.city = [];
      this.area = [];
      this.updateform.city = "";
      this.updateform.district = "";
      this.updateform.province = $event.name;
      this.updateform.provinceCode = $event.code;
      let params = {
        superCode: this.updateform.provinceCode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.city = res.data.b;
          }
        })
        .catch((err) => {});
    },
    handleChange1($event) {
      this.area = [];
      this.addform.area = "";
      this.addform.city = $event.name;
      this.addform.citycode = $event.code;
      let params = {
        superCode: this.addform.citycode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.area = res.data.b;
          }
        })
        .catch((err) => {});
    },
    cityhandleChange($event) {
      this.area = [];
      this.updateform.district = "";
      this.updateform.city = $event.name;
      this.updateform.cityCode = $event.code;
      let params = {
        superCode: this.updateform.cityCode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.area = res.data.b;
          }
        })
        .catch((err) => {});
    },
    handleChange2($event) {
      this.addform.area = $event.name;
      this.addform.areacode = $event.code;
    },
    areahandleChange($event) {
      this.updateform.district = $event.name;
      this.updateform.districtCode = $event.code;
    },
    initbox() {
      this.$chart1 = this.$echarts.init(document.querySelector(".barcake"));
    },
    initcake() {
      this.$chart1.setOption(this.option);
    },

    //获取通道模型下拉列表
    getmodel() {
      let params = {};
      this.$http
        .post("/site/type/select", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.modellist = res.data.b;
          }
        })
        .catch((err) => {});
    },
  },
  created() {
    this.usertype = JSON.parse(sessionStorage.getItem("userinfo")).type;
  },
  mounted() {
    this.getside();
    this.initbox();
    this.initcake();
    this.getsitetype();
    var erd = elementResizeDetectorMaker();
    erd.listenTo(
      document.querySelector(".barcake"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.querySelector(".barcake")).resize();
        });
      }.bind(this)
    );
  },
};
</script>
<style  scoped>
.center {
  position: relative;
}
.search {
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.search .el-input {
  float: left;
  width: 150px;
  margin-right: 10px;
}
.barchart {
  height: 25vh;
}
.barcake {
  height: 100%;
  box-sizing: border-box;
}
.el-tabs {
  margin: 0 20px;
}
.el-tabs >>> .el-tabs__nav-wrap::after {
  height: 0 !important;
}
.table {
  position: relative;
  height: 73vh;
}
.el-table {
  width: 100%;
}
.el-table /deep/ .el-table__header {
  background: url("../../assets/img/tiao.png") no-repeat;
  background-size: 100% 100%;
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.asile-echart {
  left: 0;
  top: 0;
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.order-add .el-form .el-form-item .el-select {
  display: block;
}
.order-add .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.order-add .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.order-add .el-form .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}
.station-add .el-form .el-form-item .el-select {
  display: block;
}
.station-add .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.station-add .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.station-add .el-form .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}
.station-add .el-form .el-form-item:nth-last-of-type(2) {
  width: 92%;
}
.station-add .el-form .el-form-item:nth-last-of-type(3) {
  width: 92%;
}
.station-update .el-form .el-form-item .el-select {
  display: block;
}
.station-update .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.station-update .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.station-update .el-form .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}
.station-update .el-form .el-form-item:nth-last-of-type(2) {
  width: 92%;
}
.station-update .el-form .el-form-item:nth-last-of-type(3) {
  width: 92%;
}
.order-add .el-form .el-form-item .el-select {
  display: block;
}
.site-info .el-form .el-form-item .el-select {
  display: block;
}
.site-info .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.site-info .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.site-info .el-form .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}
.site-info .el-form .el-form-item:nth-last-of-type(2) {
  width: 92%;
}
.site-info .el-form .el-form-item:nth-last-of-type(3) {
  width: 92%;
}
.threshold-info .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.threshold-info .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.threshold-info .el-form .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}
.threshold-info .el-form .el-form-item:nth-last-of-type(1) {
  width: 92%;
}
</style>
<style>
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
</style>